<template>
  <div>
    <h1>一个人的信息</h1>
    <h2>姓名：{{ person.info[0] }}</h2>
    <h2>年龄: {{ person.info[1] }}</h2>
    <h2>话语: {{ person.info[2] }}</h2>

    <button @click="setEmit">触发自定义事件</button>

    <!-- 插槽 -->
    <slot name="msg"></slot>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "Demo",
  props: ["info", "word"],
  emits: ["hello"],
  // 注意: setup函数中的this指向的是undefined， 因为setup函数是在组件实例化(beforeCreate)之前执行的
  // props: 值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。  搭配： props进行接收父组件的数据
  /* context：上下文对象
        attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。 
        slots: 收到的插槽内容, 相当于 this.$slots。
        emit: 分发自定义事件的函数, 相当于 this.$emit   搭配： emits配置给父组件发送自定义事件
    */
  setup(props, context) {
    console.log("setup中的this:" + this);
    console.log('-----setup---', props);
    console.log('----setup----', context);

    //props接收
    let person = reactive({
      info: props.info,
    });
    
    //context 自定义事件  
    function setEmit() {
      context.emit("hello", 666);
    }

    return {
      person,
      setEmit
    };
  },
};
</script>